<template>
  <div class="group-table">
    <aside-container :show-left="showLeft">
      <template v-slot:left>
        <avue-tree :option="option" :data="data" v-model="obj"
                   @node-click="chooseGroup"
                   @update="rowUpdate" @save="rowSave" @del="rowDel"
                   ref="tree"
        >
            <span class="el-tree-node__label" slot-scope="{ node, data }">
              <slot name="group-node" v-bind:data="data">
                <span>
                  <i class="el-icon-folder-opened table-cell-icon"></i>
                  {{data[groupNameKey]}}
                </span>
              </slot>
            </span>
          <template slot-scope="{ node, data }" slot="menu">
            <slot name="menu" v-bind:data="{ node, data}">
            </slot>
          </template>
        </avue-tree>
      </template>
      <template v-slot:main>
        <slot name="main-content">
          <group-item :group="currentGroup" v-if="currentGroup" :option="tableOption"
                      :foreign-key="foreignKey" :group-name-key="groupNameKey" :show-item-head="showItemHead"
                      :list-api="itemListApi" :add-api="itemAddApi" :update-api="itemUpdateApi" :del-api="itemDelApi"
          >
            <template v-slot:item-table>
              <slot name="item-crud"></slot>
            </template>
            <template v-slot:crud-menu="{data}">
              <slot name="table-menu" v-bind:data="data">
              </slot>
            </template>
          </group-item>
          <empty-img v-else></empty-img>
        </slot>
      </template>
    </aside-container>
  </div>
</template>

<script>
import GroupItem from './group-item'
import AsideContainer from '../../layout/container/aside-container'
import EmptyImg from '../../display/empty'
export default {
  name: 'group-table',
  components: { EmptyImg, AsideContainer, GroupItem },
  props: {
    resource: String,
    option: {
      type: Object,
      default: () => {
        return {}
      }
    },
    defaultParams: {
      type: Object,
      default: () => {
        return {}
      }
    },
    allApi: Function,
    addApi: Function,
    updateApi: Function,
    delApi: Function,
    groupNameKey: {
      type: String,
      default: 'groupName'
    },
    showLeft: {
      type: Boolean,
      default: true
    },
    showItemHead: {
      type: Boolean,
      default: true
    },
    foreignKey: String,
    itemResource: String,
    itemOption: {
      type: Object,
      default: () => {
        return {}
      }
    },
    itemListApi: Function,
    itemAddApi: Function,
    itemUpdateApi: Function,
    itemDelApi: Function
  },
  data () {
    return {
      loading: false,
      params: {},
      obj: {},
      data: [],
      currentGroup: null
    }
  },
  computed: {
    tableOption () {
      return this.itemOption
    },
    permission () {
      return {
        viewBtn: this.$hasPermission(`${this.resource}:view`),
        editBtn: this.$hasPermission(`${this.resource}:update`),
        addBtn: this.$hasPermission(`${this.resource}:create`),
        delBtn: this.$hasPermission(`${this.resource}:delete`)
      }
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      this.currentGroup = null
      this.loading = true
      this.data = []
      this.allApi(this.defaultParams).then(res => {
        this.loading = false
        this.data = res.data.data || []
        this.setCurrent()
      }, () => {
        this.$message.error('数据加载失败')
        this.loading = false
      }).catch(() => {
        this.$message.error('数据加载失败')
        this.loading = false
      })
    },
    setCurrent () {
      if (!this.currentGroup && this.data.length) {
        this.$nextTick(() => {
          this.currentGroup = this.data[0]
          this.$emit('node-click', this.data[0])
          const elTree = this.$refs.tree.$refs.tree
          elTree.setCurrentKey(this.currentGroup.id)
        })
      }
    },
    rowSave (parent, row, done, loading) {
      delete row.id
      row.parentId = parent.id
      this.addApi({ ...this.defaultParams, ...row }).then(() => {
        this.$message.success('新增成功')
        done()
        this.getList()
      }).catch(() => {
        loading()
      })
    },
    rowUpdate (parent, row, done, loading) {
      this.updateApi(row).then(() => {
        this.$message.success('修改成功')
        done()
        this.getList()
      }).catch(() => {
        loading()
      })
    },
    rowDel (row, done) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return this.delApi({ id: row.id })
      }).then(() => {
        this.$message.success('删除成功')
        this.getList()
      })
    },
    chooseGroup (row) {
      this.currentGroup = row
      this.$emit('node-click', row)
    }
  }
}
</script>

<style lang="scss" scoped>
.group-table, .el-container{
  height: 100%;
}
.left-block{
  width: 240px;
  background-color: #fff;
  padding: 5px;
  border-radius: 4px;
}
.main-block{
  padding: 0 5px;
}
.content-img{
  height: 90%;
  width: 100%;
}
</style>

<style lang="scss">
.group-table{
  .el-scrollbar__wrap{
    overflow: auto !important;
  }
}
</style>
